<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="less/register-style.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/flexible.js"></script>
</head>

<body>
    <header>
        <a href="javascript:void(0)" id="back">返回</a>
        <a href="javascript:void(0)">注册</a>
        <span></span>
    </header>

    <section>
        <div class="register-input">
            <action>
                <div>
                    <span>国家/地区</span>
                    <nav class="control">
                        <select name="">
                            <option value="">中国大陆 66</option>
                            <option value="">北京</option>
                            <option value="">上海</option>
                            <option value="">深圳</option>
                        </select>
                    </nav>
                </div>

            </action>
            <form action="" method="post" class="reg-form" autocomplete="off">
                <div>
                    <span class="color-default">手机号码</span> <input type="text" name="dl" id="phone1" placeholder="常用手机号"
                        required pattern="(^1[3-9]\d{9}$)"><label></label>
                </div>
                <div>
                    <span class="color-default">验证码</span><input type="text" name="" placeholder="短信验证码"> <input
                        id="btnSendCode1" type="button" class="btn-default" value="获取验证码" onClick="sendMessage1()" />
                </div>
                <div>
                    <span class="color-default">设置密码</span> <input type="password" name="psw" required
                        pattern="^\w{6,16}$" placeholder="6~12位大小字母，数字"><i></i><label></label></div>
                <div class="register-btn">
                    <button>注册</button>
                </div>
            </form>
        </div>


        <div class="register-ready">

            <!-- <p><a href="">重新发送</a> <a href="">60 S</a></p>
                <p></p> -->

        </div>
    </section>

    <script src="js/reg.js"></script>
    <script>
        var back = document.querySelector('#back');
        back.onclick = function (e) {
            window.history.back(-1);
            e.prevent();
        }

        var phoneReg = /^1[3-9]\d{9}$/;

        // 手机号正则 
        var count = 60; //间隔函数，1秒执行
        var InterValObj1; //timer变量，控制时间
        var curCount1;//当前剩余秒数

        function sendMessage1() {
            curCount1 = count;
            var phone = $.trim($('#phone1').val());
            console.log(phone);
            if (!phoneReg.test(phone)) {
                alert(" 请输入有效的手机号码");
                return false;
            }

            //设置button效果，开始计时
            $("#btnSendCode1").attr("disabled", "true");
            $("#btnSendCode1").val(+ curCount1 + "秒再获取");
            InterValObj1 = window.setInterval(SetRemaniTime1, 1000); //启动计时器，1秒执行一次
            //向后台发送处理数据
        }
        function SetRemaniTime1() {
            if (curCount1 == 0) {
                window.clearInterval(InterValObj1);//停止计时器
                $("#btnSendCode1").removeAttr("disabled");//启用按钮
                $("#btnSendCode1").val("重新发送");
            }
            else {
                curCount1--;
                $("#btnSendCode1").val(+ curCount1 + "秒再获取");
            }
        }
    </script>
</body>

</html>